<template>
  <div class="interface-debug">
    <el-row>
      <el-col :span="16">
        <!--基本信息-->
        <div>
          <h3 class="interface-title-1">基本信息</h3>
          <el-form :inline="true" label-width="100px" label-position="left">
            <el-row>
              <el-col :span="10">
                <el-form-item label="接口编号：">
                  <span>{{interfaceForm.id}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label="接口名称：">
                  <span>{{interfaceForm.name}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="接口状态：">
                  <el-tag v-if="interfaceForm.status == 0" type="warning" size="medium">未完成</el-tag>
                  <el-tag v-else-if="interfaceForm.status == 1" size="medium">已完成</el-tag>
                  <el-tag v-else-if="interfaceForm.status == 2" type="danger" size="medium">已关闭</el-tag>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label="接口路径：">
                  <el-tag v-if="interfaceForm.method =='GET'" size="medium">{{interfaceForm.method}}</el-tag>
                  <el-tag v-if="interfaceForm.method =='POST'" size="medium" type="success">{{interfaceForm.method}}</el-tag>
                  <el-tag v-if="interfaceForm.method =='DELETE'" size="medium" type="danger">{{interfaceForm.method}}</el-tag>
                  <el-tag v-if="interfaceForm.method =='PUT'" size="medium" type="warning">{{interfaceForm.method}}</el-tag>
                  <span style="letter-spacing: 1px"> {{interfaceForm.path}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="接口描述：">
                  <span>{{interfaceForm.description}}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <!--环境选择-->
        <div>
          <h3 class="interface-title-1">环境</h3>
          <el-form :inline="true" label-width="100px" label-position="left">
            <el-row>
              <el-col :span="24">
                <el-form-item label="环境：" required>
                  <el-select v-model="envList.ip" placeholder="请选择">
                    <el-option v-for="(item,index) in envList.list" :key="index" :label="item.ip" :value="item.ip"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <!--请求参数-->
        <div class="interface-debug-request" style="padding-right: 3px">
          <h3 class="interface-title-1">Request</h3>
          <div class="interface-tab-in">
            <el-tabs v-model="activeName" type="border-card">
              <el-tab-pane label="请求参数" name="first">
                <div class="interface-edit-tabs">
                  <el-row v-for="(item,index4) in interfaceForm.params" :key="index4">
                    <el-col :span="6">
                      <el-input placeholder="参数名" v-model.trim="item.name"></el-input>
                    </el-col>
                    <el-col :span="4">
                      <el-select placeholder="必填" v-model="item.must">
                        <el-option label="必填" :value=true></el-option>
                        <el-option label="非必填" :value=false></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="10">
                      <el-input placeholder="参数值" v-model.trim="item.value"></el-input>
                    </el-col>
                    <el-col :span="4">
                      <el-button type="primary" size="mini" icon="el-icon-plus" circle @click="addNewParam()"></el-button>
                      <el-button type="danger" size="mini" icon="el-icon-delete" circle v-on:click="interfaceForm.params.splice(index4, 1)"></el-button>
                    </el-col>
                  </el-row>
                </div>

              </el-tab-pane>
              <!-- <el-tab-pane label="公共参数" name="second">
                <div class="interface-edit-tabs">
                  <el-row v-for="(item,index) in interfaceForm.commonParams" :key="index">
                    <el-col :span="6">
                      <el-input placeholder="参数名" v-model.trim="item.name"></el-input>
                    </el-col>
                    <el-col :span="4">
                      <el-select placeholder="必填" v-model="item.must">
                        <el-option label="必填" :value=true></el-option>
                        <el-option label="非必填" :value=false></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="10">
                      <el-input placeholder="参数值" v-model.trim="item.value"></el-input>
                    </el-col>
                    <el-col :span="4">
                      <el-button type="primary" size="mini" icon="el-icon-plus" circle @click="addNewCommonParams()"></el-button>
                      <el-button type="danger" size="mini" icon="el-icon-delete" circle v-on:click="interfaceForm.commonParams.splice(index, 1)"></el-button>
                    </el-col>
                  </el-row>
                </div>

              </el-tab-pane> -->

              <el-tab-pane label="请求Header" name="third">
                <div class="interface-edit-tabs">
                  <el-row v-for="(item,index5) in interfaceForm.headers" :key="index5">
                    <el-col :span="8">
                      <el-input placeholder="参数名" v-model.trim="item.name"></el-input>
                    </el-col>
                    <el-col :span="12">
                      <el-input placeholder="参数值" v-model.trim="item.value"></el-input>
                    </el-col>
                    <el-col :span="4">
                      <el-button type="primary" size="mini" icon="el-icon-plus" circle @click="addNewHeader()"></el-button>
                      <el-button type="danger" size="mini" icon="el-icon-delete" circle v-on:click="interfaceForm.headers.splice(index5, 1)"></el-button>
                    </el-col>
                  </el-row>
                </div>

              </el-tab-pane>
              <el-tab-pane label="请求cookie" name="fourth">
                <div class="interface-edit-tabs">
                  <el-row v-for="(item,index6) in interfaceForm.cookies" :key="index6">
                    <el-col :span="8">
                      <el-input placeholder="参数名" v-model.trim="item.name"></el-input>
                    </el-col>
                    <el-col :span="12">
                      <el-input placeholder="参数值" v-model.trim="item.value"></el-input>
                    </el-col>
                    <el-col :span="4">
                      <el-button type="primary" size="mini" icon="el-icon-plus" circle @click="addNewCookies()"></el-button>
                      <el-button type="danger" size="mini" icon="el-icon-delete" circle v-on:click="interfaceForm.cookies.splice(index6, 1)"></el-button>
                    </el-col>
                  </el-row>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>

      </el-col>

      <el-col :span="8">
        <h3 class="interface-title-1">Response</h3>
        <div class="interface-debug-response">
          <span class="interface-debug-p">请求Url：</span>
          <el-input type="textarea" :rows="4" style="margin-bottom: 15px;font-size:13px" v-model="response.url"></el-input>

          <span class="interface-debug-p">Header：</span>
          <el-input type="textarea" :rows="7" style="margin-bottom: 15px;font-size:13px" v-model="response.headers"></el-input>

          <span class="interface-debug-p">response：</span>
          <div>
            <span class="interface-debug-q">请求时长：<b>{{response.time}}</b></span>
            <span class="interface-debug-q" style="margin-left:10px">请求结果：<b :style="{color: response.color}">{{response.message}}</b></span>
          </div>
          <!-- <div class="deep">
            <el-form label-width="50px" label-position="left">
              <el-form-item label="deep:">
                <el-select v-model="deep" placeholder="请选择">
                  <el-option :key="1" :label="1" :value="1"> </el-option>
                  <el-option :key="2" :label="2" :value="2"> </el-option>
                  <el-option :key="3" :label="3" :value="3"> </el-option>
                  <el-option :key="4" :label="4" :value="4"> </el-option>
                  <el-option :key="5" :label="5" :value="5"> </el-option>
                  <el-option :key="6" :label="6" :value="6"> </el-option>
                  <el-option :key="7" :label="7" :value="7"> </el-option>
                  <el-option :key="8" :label="8" :value="8"> </el-option>
                  <el-option :key="9" :label="9" :value="9"> </el-option>
                  <el-option :key="10" :label="10" :value="10"> </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div> -->
          <div>
            <json-view :data="response.result" icon-style="square" style="min-height:400px" theme="one-dark" :font-size="13" :line-height="22" :deep="deep" />
          </div>
        </div>

      </el-col>
    </el-row>

    <div style="text-align: center;margin-top: 15px;position: fixed;bottom:0;width:40%;padding-bottom: 15px">
      <el-row>
        <el-button :loading="loadingButton.debugButton" type="primary" icon="el-icon-caret-right" @click="interfaceDebugExecuted()" size="small">调试</el-button>
        <router-link :to="{  name:'接口管理'}">
          <el-button type="warning" icon="el-icon-back" size="small">返回</el-button>
        </router-link>
      </el-row>
    </div>

  </div>
</template>


<script>
import { getEnv } from '@/api/env'
import jsonView from "vue-json-views";
import { executorInterface } from '@/api/executor'
import { isNull, isEmpty, listToJson } from "@/utils/baseUtil";
export default {

  data () {
    return {

      activeName: 'first',
      deep: 1,


      envList: {
        projectId: this.$store.state.projectId,
        ip: "",
        list: []
      },

      //接口提交表单
      interfaceForm: {
        projectId: "",
        groupId: "",
        interfaceId: "",
        commonParams: [],
        params: [],
        headers: []
      },

      //返回数据
      response: {
        url: "",
        time: "",
        cookies: "",
        headers: "",
        result: {},
        message: "",
        color: "green",
      },

      loadingButton: {
        debugButton: false
      },
    }

  },


  components: {
    jsonView
  },


  methods: {

    //获取项目下环境信息
    getEnv (projectId) {
      projectId = projectId || this.envList.projectId
      this.envList.list = []
      getEnv(projectId, '', '', 1, 100).then(resp => {
        if (resp.code == 200) {
          this.envList.list = resp.data.records
        }
      })
    },


    //更新接口信息
    updateInterfaceInfo (interfaceForm) {
      this.interfaceForm = interfaceForm
    },

    //接口调试
    interfaceDebugExecuted () {
      this.loadingButton.debugButton = true
      //初始response
      this.response.url = "";
      this.response.cookies = "";
      this.response.headers = "";
      this.response.message = "";
      this.response.result = {};
      if (this.envList.ip == "") {
        this.$message({
          message: "请选择环境！",
          type: "error"
        });
        this.loadingButton.debugButton = false
        return;
      }
      //请求参数
      let parameters = isEmpty(this.interfaceForm.params) ? "" : listToJson(this.interfaceForm.params)
      //请求头
      let headers = isEmpty(this.interfaceForm.headers) ? "" : listToJson(this.interfaceForm.headers);
      //请求cookie
      let cookies = isEmpty(this.interfaceForm.cookies) ? "" : listToJson(this.interfaceForm.cookies);

      let url = this.interfaceForm.protocol + "://" + this.envList.ip + this.interfaceForm.path;

      let arr = {
        projectId: this.interfaceForm.projectId,
        url: url,
        method: this.interfaceForm.method,
        parameters: parameters,
        headers: headers,
        cookie: cookies
      }
      executorInterface(arr).then(resp => {
        console.log(resp.hasOwnProperty('code'))
        if (resp.code == 200) {
          this.response.color = "green"
          this.response.url = resp.data.url;
          this.response.cookies = resp.data.cookies;
          this.response.headers = resp.data.headers;
          this.response.result = JSON.parse(resp.data.response);
          this.response.message = resp.data.message;
          this.loadingButton.debugButton = false
        } else {
          this.response.result = resp;
          this.loadingButton.debugButton = false
        }
      }).catch(err => {
        this.loadingButton.debugButton = false
        this.response.result = err;
      });;
    },


    //添加参数
    addNewParam () {
      this.interfaceForm.params.push({
        name: "",
        must: false,
        remark: "",
        value: ""
      });

    },



    //添加请求头
    addNewHeader () {
      this.interfaceForm.headers.push({
        name: "",
        value: "",
        remark: ""
      });

    },
    //添加cookie
    addNewCookies () {
      this.interfaceForm.cookies.push({
        name: "",
        value: "",
        remark: ""
      });

    },

  },

  mounted () {
    this.getEnv();
    this.interfaceForm = this.$store.state.interfaceInfo;


  }
}
</script>


<style scoped>
.interface-debug-button .el-button--medium {
  padding: 1px 1px;
}

.interface-debug-p {
  font-size: 14px;
  font-weight: 500;
}
.interface-debug-q {
  font-size: 13px;
}

.interface-debug {
  padding-right: 2px;
}

.interface-debug-request .el-table--medium th {
  padding: 7px 0;
}

.interface-debug-request .el-tabs__item {
  font-size: 14px;
}

.interface-debug-response .interface-debug-response {
  padding: 3px 5px;
}

.interface-debug .el-textarea__inner {
  padding: 5px 6px;
}

.interface-debug .el-tabs--border-card {
  min-height: 200px;
  border-radius: 4px;
}

.interface-debug .deep .el-form-item {
  margin-right: 1px;
  margin-bottom: 0px;
}

.interface-debug .deep .el-form-item__label {
  line-height: 35px;
}

.interface-debug .interface-title-1 {
  clear: both;
  font-weight: 400;
  margin-top: 0.4rem;
  border-left: 3px solid #2395f1;
  padding-left: 8px;
  display: inline-block;
}

.interface-debug >>> .interface-edit-tabs .el-col {
  padding-right: 6px;
}
</style>